import React from 'react';
import { View, ViewProps, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import { useResponsiveContext } from './ResponsiveProvider';

interface ResponsiveViewProps extends ViewProps {
  style?: StyleProp<ViewStyle>;
  portraitStyle?: StyleProp<ViewStyle>;
  landscapeStyle?: StyleProp<ViewStyle>;
  phoneStyle?: StyleProp<ViewStyle>;
  tabletStyle?: StyleProp<ViewStyle>;
}

const ResponsiveView: React.FC<ResponsiveViewProps> = ({
  style,
  portraitStyle,
  landscapeStyle,
  phoneStyle,
  tabletStyle,
  children,
  ...props
}) => {
  const { orientation, isTablet } = useResponsiveContext();

  // 根据设备方向和类型应用不同样式
  const getResponsiveStyle = () => {
    const styles = [style];

    // 根据横竖屏添加样式
    if (orientation === 'PORTRAIT' && portraitStyle) {
      styles.push(portraitStyle);
    } else if (orientation === 'LANDSCAPE' && landscapeStyle) {
      styles.push(landscapeStyle);
    }

    // 根据设备类型添加样式
    if (isTablet && tabletStyle) {
      styles.push(tabletStyle);
    } else if (!isTablet && phoneStyle) {
      styles.push(phoneStyle);
    }

    return styles;
  };

  return (
    <View style={getResponsiveStyle()} {...props}>
      {children}
    </View>
  );
};

export default ResponsiveView; 